<template>
  <div class="login">
    <div class="main">
      <div>用户登录</div>
      <div class="top30">
        <el-input
          v-model="loginForm.username"
          clearable
          placeholder="账号"
        ></el-input>
        <el-input
          v-model="loginForm.password"
          clearable
          placeholder="密码"
          type="password"
        ></el-input>
      </div>
      <div class="top20 flex-around">
        <el-button type="primary" size="small" @click="login()">登录</el-button>
        <el-button type="info" @click="rest()" size="small">重置</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {baseUrls} from '@/main.js'
export default {
  data() {
    return {
      loginForm: {
        username: "sicau",
        password: "123456",
      },
      Content:[]
    };
  },
  methods: {
    rest() {
      this.loginForm.username = "";
      this.loginForm.password = "";
      console.log();
    },
    // },
    async login(){
        console.log(this.loginForm);
        const { data : res }=await this.$http.post(`${baseUrls.base1}/center/login`,this.loginForm )
            console.log(res);
            if(res.status===200){
                this.$message.success('登陆成功')
                window.sessionStorage.setItem('token', res.data.token)
                this.$router.push('/home')
            }
            else{
                this.$message.error('登录失败，请检查账号密码是否输入正确');

            }
    }
  },
//   created(){
//       this.login()
//   }
};
</script>
<style  scoped>
.login {
  height: 100%;
  width: 100%;
  background-color: #f3f4f7;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.main {
  /* margin: 0 auto; */
  background-color: #fff;
  width: 200px;
  padding: 50px;
}
.main > div {
  text-align: center;
  color: #1a73e8;
  font-size: 20px;
  font-weight: 700;
}
</style>